<template>
    <NuxtLayout name="default">
        <div class="flex flex-1 gap-4 overflow-hidden">
            <div class="flex flex-col shrink-0 w-[360px] bg-body rounded-lg border border-br-lighter">
                <div class="m-3">
                    <editor-option type="zhipu" />
                </div>
                <el-scrollbar>
                    <div class="p-4 flex flex-col gap-4 relative">
                        <!-- 参考图片 -->
                        <editor-upload
                            v-model="formData.image_url"
                            type="image"
                            title="参考图片"
                            tips="提供基于其生成内容的图像，以该图像为基础进行操作。"
                        />

                        <!-- 视频描述 -->
                        <editor-prompt v-model="formData.prompt" />

                        <!-- 视频尺寸 -->
                        <zhipu-size v-model="formData.scale" />

                        <!-- 视频质量 -->
                        <zhipu-fps v-model="formData.other_params.fps" />

                        <!-- 输出模式 -->
                        <zhipu-quality v-model="formData.other_params.quality" />

                        <!-- AI音效生成 -->
                        <zhipu-audio v-model="formData.other_params.with_audio" />
                    </div>
                </el-scrollbar>

                <div class="m-3 mt-0">
                    <create-button />
                </div>
            </div>

            <RevealResult />
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import CreateButton from './_components/create-button.vue'
import EditorOption from './_components/editor-option.vue'
import EditorUpload from './_components/editor-upload.vue'
import EditorPrompt from './_components/editor-prompt.vue'
import ZhipuFps from './_components/zhipu/zhipu-fps.vue'
import ZhipuSize from './_components/zhipu/zhipu-size.vue'
import ZhipuAudio from './_components/zhipu/zhipu-audio.vue'
import ZhipuQuality from './_components/zhipu/zhipu-quality.vue'
import RevealResult from './_reveal/index.vue'
import { formData, getVideoConfig, resetFormData } from './hooks/useVideoEffect'

onMounted(async () => {
    await resetFormData({
        // 视频通道
        engine: 'zhipu',
        // 视频描述
        prompt: '',
        // 缩放比例
        scale: '1920x1080',
        // 参考图片
        image_url: '',
        // 其它参数
        other_params: {
            // 是否生成AI音效
            with_audio: false,
            // 输出模型: [speed=速度优先, quality=质量优先]
            quality: 'speed',
            // 视频帧率: [30, 60]
            fps: '30'
        }
    })
    await getVideoConfig()
})
</script>
